
<template> 
    <el-container>
        <!-- <el-header>Header</el-header> -->
        <el-main style="min-height: 750px;">
            <div>
                <el-alert
                    title="错误"
                    type="error"
                    :description="msg"
                    :closable="false"
                    show-icon>
                </el-alert>
            </div>
            <el-card class="box-card" style="margin-top:10px;">
                <div slot="header" class="clearfix">
                    <span><i class="el-icon-menu"></i> We have ways to do.</span>
                    <el-tag style="float: right; margin-right:4px;">
                        <el-tooltip placement="top" type="info">
                            <div slot="content">返回到主页</div>
                            <a href="/">Back Home</a>
                        </el-tooltip>
                    </el-tag>
                    <el-tag style="float: right; margin-right:4px;">
                        <el-tooltip placement="bottom">
                            <div slot="content">跳转到注册页面</div>
                            <a href="/aurora/index/register" style="float: right; padding: 3px 0;margin-right:4px;">Register</a>
                        </el-tooltip>
                    </el-tag>
                </div>
            </el-card>
            <el-card style="margin-top:10px;">
                <el-input
                    type="textarea"
                    :rows="6"
                    placeholder="Tell us what wrong, guys!!"
                    v-model="textarea">
                </el-input>
                <div class="bottom clearfix">
                    <el-button type="text" class="button">push me</el-button>
                </div>
            </el-card>
        </el-main>
        <el-footer>
            <center-footer></center-footer>
        </el-footer>
    </el-container>    
</template>

<script>
  import centerFooter from '../components/center-footer.vue'
  export default {
    data() {
        return {
            msg: this.$c.getQuery('msg', '原因未知')
        }
    },
    components:{
        centerFooter
    }
  }
</script>


<style>
.el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    /* line-height: 60px; */
}

/* .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
} */

.el-main {
    /* background-color: #E9EEF3; */
    color: #333;
    text-align: center;
    /* line-height: 160px; */
}

body > .el-container {
    /* margin-bottom: 40px; */
}

/* .el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
    line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
    line-height: 320px;
} */

.box-card a{
    text-decoration-line: none;
}

.bottom {
    margin-top: 13px;
    line-height: 12px;
}
.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}
</style>